<template>
  <div>
   <div class="head">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
    </div>
    <div class="in-out">
      <!-- <van-button class="open" text="开门" round="true" color="linear-gradient(to right, #ff6034, #ee0a24)"></van-button> -->
      <input class="btn"  type="button" value="开门" @click="musicPlay">
    </div>
    <buttom-Tabbar />
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, DropdownMenu, DropdownItem } from 'vant'
import ButtomTabbar from '../../components/ButtomTabbar'
Vue.use(Button).use(DropdownMenu).use(DropdownItem)
export default{
  name: 'Entrance',
  components: {
    'buttom-Tabbar': ButtomTabbar
  },
  data () {
    return {
      value1: 0,
      option1: [
        { text: '东区大门', value: 0 },
        { text: '南区大门', value: 1 },
        { text: '西区大门', value: 2 },
        { text: '北区大门', value: 3 }
      ],
      audioUrl: '../../../dingdong.mp3'
    }
  },
  methods: {
    musicPlay () {
      this.music = new Audio('../../../static/dingdong.mp3')
      this.music.play()
    }
  }
}
</script>

<style scoped>
.in-out{
  margin-top: 200px;
}
.btn{
  width: 250px;
  height: 250px;
  border-radius:50%;
  transition: all 0.2s ease-out;
  border: none;
  color:cornsilk;
  font-size: 25px;
  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
}
.btn:active{
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),inset 18px 18px 30px rgba(0, 0, 0, 0.1),inset -18px -18px 300px rgba(255, 255, 255, 1);
};
</style>
